<template>
	<view class="order-item" @click="itemClick">
		<view class="order-item-title">
			<image class="order-item-title-icon" src="@/static/logo.png" />
			<view class="order-item-title-name">联联探客</view>
			<image
				v-if="getOrderStatus !== '' && item.approveStatus !== 3"
				class="order-item-title-go"
				src="@/static/images/order/icon_ddgl_right.png"
			/>
			<view class="order-item-title-status">
				<view
					v-if="getOrderStatus !== '' && item.approveStatus !== 3"
					class="order-item-title-status-name"
					:style="{ color: orderStatusStr[getOrderStatus].color }"
				>
					{{ orderStatusStr[getOrderStatus].name }}
				</view>
				<image v-else class="order-item-title-status-go" src="@/static/images/order/icon_ddgl_right.png" />
			</view>
		</view>
		<view class="order-item-info">
			<image class="order-item-info-image" :src="item.faceImg" />
			<view class="order-item-info-name" @click.stop="goToProductDetails">{{ item.productName }}</view>
			<view class="order-item-info-money">
				<view
					v-if="
						(item.incomeStatus && getOrderStatus !== 'finish' && item.approveStatus !== 4 && item.approveStatus !== 5) ||
						!item.incomeStatus
					"
					class="order-item-info-money-now"
				>
					¥{{ item.salePriceYuan }}
				</view>
				<view
					v-if="
						(item.incomeStatus && getOrderStatus !== 'finish' && item.approveStatus !== 4 && item.approveStatus !== 5) ||
						!item.incomeStatus
					"
					class="order-item-info-money-old"
				>
					¥{{ item.originPriceYuan }}
				</view>
				<view v-if="getOrderStatus === 'finish' && item.incomeStatus" class="order-item-info-money-income">今日收益</view>
				<view v-if="getOrderStatus === 'finish' && item.incomeStatus" class="order-item-info-money-add">
					+{{ item.allIncome.todayIncome / 100 }}
				</view>
			</view>
		</view>
		<view
			class="order-item-preview"
			v-if="(getOrderStatus === 'review' && item.incomeStatus) || (getOrderStatus === 'finish' && !item.incomeStatus)"
		>
			<view class="order-item-preview-image">
				<view
					class="order-item-preview-image-item"
					v-for="(resItem, resIndex) in item.resourceList"
					:key="resIndex"
					:style="{
						'z-index': resIndex
					}"
				>
					<image class="order-item-preview-image-item-cover" :src="resItem.coverUrl || videoDefaultBgImage" />
					<view v-if="resItem.resourceType === 2" class="order-item-preview-image-item-black" />
					<image
						v-if="resItem.resourceType === 2"
						class="order-item-preview-image-item-icon"
						src="@/static/images/order/icon_sc_video.png"
					/>
				</view>
			</view>
			<view class="order-item-preview-info">
				<view class="order-item-preview-info-text">
					图片{{ getOrderStatus === 'review' ? item.imgNumber : item.successImgNumber }}张 视频{{
						getOrderStatus === 'review' ? item.videoNumber : item.successVideoNumber
					}}份
				</view>
				<image class="order-item-preview-info-go" src="@/static/images/order/icon_ddgl_right.png" />
			</view>
		</view>
		<view class="order-item-money">
			<view class="order-item-money-much">
				<view v-if="!item.incomeStatus" class="order-item-money-much-title">实际支付</view>
				<view v-if="!item.incomeStatus" class="order-item-money-much-symbol" style="margin-left: 4rpx">¥</view>
				<view v-if="!item.incomeStatus" class="order-item-money-much-num">{{ item.payMoney / 100 }}</view>

				<view v-if="item.incomeStatus" class="order-item-money-much-title">总收益</view>
				<view v-if="item.incomeStatus" class="order-item-money-much-symbol" style="margin-left: 4rpx">¥</view>
				<view v-if="item.incomeStatus" class="order-item-money-much-num">
					{{ item.allIncome.totalIncome / 100 }}
				</view>
				<view
					v-if="item.incomeStatus && item.allIncome.imgIncome > 0"
					class="order-item-money-much-punctuation"
					style="margin-left: 4rpx"
				>
					，
				</view>
				<view v-if="item.incomeStatus && item.allIncome.imgIncome > 0" class="order-item-money-much-title">图片</view>
				<view
					v-if="item.incomeStatus && item.allIncome.imgIncome > 0"
					class="order-item-money-much-symbol"
					style="margin-left: 4rpx"
				>
					¥
				</view>
				<view v-if="item.incomeStatus && item.allIncome.imgIncome > 0" class="order-item-money-much-num">
					{{ item.allIncome.imgIncome / 100 }}
				</view>

				<view
					v-if="item.incomeStatus && item.allIncome.videoIncome > 0"
					class="order-item-money-much-punctuation"
					style="margin-left: 4rpx"
				>
					，
				</view>
				<view v-if="item.incomeStatus && item.allIncome.videoIncome > 0" class="order-item-money-much-title">视频</view>
				<view
					v-if="item.incomeStatus && item.allIncome.videoIncome > 0"
					class="order-item-money-much-symbol"
					style="margin-left: 4rpx"
				>
					¥
				</view>
				<view v-if="item.incomeStatus && item.allIncome.videoIncome > 0" class="order-item-money-much-num">
					{{ item.allIncome.videoIncome / 100 }}
				</view>
			</view>
		</view>

		<template v-if="item.incomeStatus && item.approveStatus === 1">
			<view class="order-item-footer">
				<button @click.prevent="openCancelCommonApplication(item)">取消申请</button>
			</view>
		</template>

		<template v-if="isMask">
			<view class="order-item-mask" />

			<image class="order-item-mask-image" :src="maskIcon" />
		</template>

		<DistributionCommonPopup v-model="showRejectedPopup" title="驳回原因" @input="closePopup">
			<view class="order-item-rejected">
				{{ item.approveMessage }}
				<template v-if="item.additionMessage">
					<text>（{{ item.additionMessage || '哈哈虎' }}）</text>
				</template>
			</view>
		</DistributionCommonPopup>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';

import DistributionCommonPopup from '@/components/distributionCommonPopup/index.vue';
const orderStatusStr = Object.freeze({
	review: { name: '审核中', color: '#FF6B11' },
	finish: { name: '已完成', color: '#57AE59' }
});
const jumpUrls = Object.freeze({
	applying: '/materialPage/MaterialReviewOrder',
	applySuccess: '/materialPage/MaterialOrderPass',
	buy: '/materialPage/MaterialOrderBuy'
});
const videoDefaultBgImage = Object.freeze(`${defaultImageUrl}image/video_default_bgimg.png`);

export default {
	name: 'MaterialOrderItem',
	props: {
		item: {
			default: {}
		},
		index: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			showRejectedPopup: false,
			orderStatusStr,
			jumpUrls,

			videoDefaultBgImage
		};
	},
	components: { DistributionCommonPopup },
	computed: {
		isMask() {
			const {
				item: { approveStatus, incomeStatus }
			} = this;

			if (approveStatus === 7 || (incomeStatus && [4, 5].includes(approveStatus))) {
				return true;
			}

			return false;
		},

		maskIcon() {
			const {
				item: { approveStatus }
			} = this;

			return approveStatus === 7
				? require('@/static/images/order/img_ddgl_cancel.png')
				: require('@/static/images/order/img_ddgl_bh.png');
		},

		getOrderStatus() {
			const {
				item: { incomeStatus, approveStatus }
			} = this;
			if (incomeStatus === true) {
				if ([0, 1, 2, 6].includes(approveStatus)) {
					return 'review';
				} else if (approveStatus === 3) {
					return 'finish';
				}
			} else if (incomeStatus === false) {
				if (approveStatus === 1) {
					return 'finish';
				}
			}
			return '';
		}
	},
	methods: {
		closePopup() {
			this.showRejectedPopup = false;
		},
		//点击订单
		itemClick() {
			const {
				item: { incomeStatus, approveStatus, productId, uploadNo, cartOrderNo },
				getOrderStatus,
				jumpUrls
			} = this;

			if (approveStatus === 7) {
				this.showRejectedPopup = true;
				return;
			}

			if (incomeStatus === true && (approveStatus === 4 || approveStatus === 5)) {
				this.showRejectedPopup = true;
			} else {
				let url;
				if (incomeStatus === true && getOrderStatus === 'review') {
					const params = '?orderId=' + productId + '&approveStatus=' + approveStatus + '&uploadNo=' + uploadNo;
					url = jumpUrls.applying + params;
				} else if (incomeStatus === true && getOrderStatus === 'finish') {
					const params = '?orderId=' + productId + '&approveStatus=' + approveStatus + '&uploadNo=' + uploadNo;
					url = jumpUrls.applySuccess + params;
				} else if (incomeStatus === false) {
					const params = '?orderId=' + productId + '&approveStatus=' + approveStatus + '&cartOrderNo=' + cartOrderNo;
					url = jumpUrls.buy + params;
				}
				uni.navigateTo({
					url: url
				});
			}
		},
		//进入商品详情
		goToProductDetails() {
			const {
				item: { incomeStatus, productId }
			} = this;
			if (incomeStatus) {
				uni.navigateTo({
					url: `/materialPage/MaterialUpload?productId=` + productId
				});
			} else {
				uni.navigateTo({
					url: `/materialPage/MaterialDownload?productId=` + productId
				});
			}
		},

		openCancelCommonApplication(params) {
			const { approveStatus, uploadNo, productId } = params;

			uni.navigateTo({
				url: `/productOrderPage/CancelCommonApplication?isMaterial=1&resourceType=3&approveStatus=${approveStatus}&orderNo=${uploadNo}&productId=${productId}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.order-item {
	width: 710rpx;
	background: #ffffff;
	border-radius: 24rpx;
	margin-top: 20rpx;
	padding: 30rpx 16rpx 28rpx 16rpx;
	position: relative;

	&-title {
		display: flex;
		align-items: center;
		position: relative;
		&-icon {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
		}
		&-name {
			font-size: 26rpx;
			font-weight: 500;
			color: #000000;
			max-width: 470rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			margin-left: 16rpx;
		}
		&-go {
			width: 32rpx;
			height: 32rpx;
			margin-left: 12rpx;
		}
		&-status {
			position: absolute;
			right: 0;
			display: flex;

			&-name {
				font-size: 28rpx;
				font-weight: 500;
				color: #ff6b11;
			}
			&-go {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	&-info {
		display: flex;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		position: relative;
		&-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 16rpx;
		}
		&-name {
			margin-left: 16rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #000000;
			width: 336rpx;
			height: 72rpx;
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			text-decoration: underline;
		}
		&-money {
			position: absolute;
			right: 0;
			text-align: right;
			&-now {
				font-size: 32rpx;
				font-family: font-number;
				font-weight: bold;
				color: #666666;
			}
			&-old {
				font-size: 20rpx;
				font-family: font-number;
				font-weight: bold;
				color: #b5b5b5;
				text-decoration: line-through;
			}
			&-income {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
			}
			&-add {
				font-size: 56rpx;
				@include Db_moneyStyle();
			}
		}
	}
	&-preview {
		height: 72rpx;
		background: #f6f6f6;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 16rpx 8rpx 12rpx;
		&-image {
			display: flex;
			padding-left: 16rpx;
			&-item {
				position: relative;
				margin-left: -18rpx;
				&-cover {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					border: 2rpx solid #f6f6f6;
				}
				&-black {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					background: rgba(0, 0, 0, 0.6);
					border-radius: 50%;
					border: 2rpx solid #f6f6f6;
				}
				&-icon {
					position: absolute;
					width: 28rpx;
					height: 28rpx;
					z-index: 100;
					left: 16rpx;
					top: 16rpx;
				}
			}
		}
		&-info {
			display: flex;
			&-text {
				font-size: 22rpx;
				font-weight: 400;
				color: #666666;
			}
			&-go {
				width: 32rpx;
				height: 32rpx;
				z-index: 10;
				margin-left: 8rpx;
			}
		}
	}
	&-money {
		height: 72rpx;
		margin-top: 12rpx;
		background: #f6f6f6;
		border-radius: 16rpx;
		padding: 16rpx 24rpx 16rpx 24rpx;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		&-much {
			display: flex;
			align-items: baseline;
			&-title {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				//line-height: 20rpx;
			}
			&-symbol {
				font-size: 28rpx;
				//line-height: 24rpx;

				@include Db_moneyStyle();
			}
			&-num {
				font-size: 40rpx;
				line-height: 36rpx;
				@include Db_moneyStyle();
			}
			&-punctuation {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	&-footer {
		padding-top: 28rpx;
		display: flex;
		justify-content: flex-end;

		button {
			@include Db_commonButton(56rpx, 28rpx);

			color: #666;
			margin: 0;
			border: 2rpx solid #666;
			background: transparent;

			&:active {
				background: transparent;
			}
		}
	}

	&-mask {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		padding-top: 88rpx;
		padding-left: 566rpx;
		background-color: #ffffff;
		opacity: 0.6;
		border-radius: 24rpx;
		&-image {
			z-index: 3;
			position: absolute;
			top: 88rpx;
			left: 566rpx;
			opacity: 1;
			width: 120rpx;
			height: 120rpx;
		}
	}
	&-rejected {
		font-size: 34rpx;
		font-weight: 500;
		color: #000000;
		margin: 90rpx auto 130rpx;
		text-align: center;

		text {
			color: #999;
			font-size: 28rpx;
		}
	}
}
</style>
